<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>首页</title>
	<link rel="shortcut icon" href="./static/image/favicon.ico">
	<link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="./static/css/public.css">
	<link rel="stylesheet" type="text/css" href="./static/css/m_tailwind.css">
	<style>
		.home-wp {
			padding-top: 80px;
			width: 100%;
			height: 100%;
			background: url(./static/image/bg01.png) no-repeat center;
			background-size: 100% 100%;
		}
		.main {
			margin: 0 auto;
			width: 996px;
		}
		.row1 {
			position: relative;
			margin-bottom: 20px;
			height: 126px;
			background: url(./static/image/img02.png) no-repeat center;
			background-size: 100% 100%;
		}
		.row1 .tip {
			position: absolute;
			top: 80px;
			left: 0;
			font-size: 12px;
	    color: rgba(255,242,233,.8);
	    line-height: 20px;
	    font-weight: 400;
	    margin-left: 65px;
		}
		.row1 .down-time {
			position: absolute;
			top: 27px;
			left: 530px;
			color: #ffdca6;
			line-height: 26px;
			display: flex;
		}
		.row1 .down-time .num {
	    width: 32px;
	    height: 26px;
	    background: -webkit-gradient(linear,left top,left bottom,from(#ffd2a4),to(#ffe9c9));
	    background: -webkit-linear-gradient(#ffd2a4,#ffe9c9);
	    background: -moz-linear-gradient(#ffd2a4,#ffe9c9);
	    background: linear-gradient(#ffd2a4,#ffe9c9);
	    background-image: -webkit-gradient(linear,left bottom,left top,from(#ffd2a4),to(#ffe9c9));
	    background-image: -webkit-linear-gradient(bottom,#ffd2a4,#ffe9c9);
	    background-image: -moz-linear-gradient(bottom,#ffd2a4 0,#ffe9c9 100%);
	    background-image: linear-gradient(0deg,#ffd2a4,#ffe9c9);
	    -moz-border-radius: 3.4px;
	    border-radius: 3.4px;
	    color: #5c3a1f;
	    display: flex;
	    justify-content: center;
		}
		.row1 .down-time .txt {
			margin: 0 4px;
		}
		.row2 {
			margin-bottom: 20px;
			display: block;
			width: 100%;
		}
		.row3 {
			padding: 24px;
			background: #fff;
		}
		.row3 .top {
			margin: 0 auto;
			display: block;
			width: 354px;
			height: 24px;
		}
		.row3 .text {
	    color: rgba(0,0,0,.4);
	    margin-top: 16px;
	    font-size: 14px;
	    text-align: center;
	    line-height: 14px;
	    font-weight: 400;
		}
		.row3 .steps {
			display: flex;
			justify-content: space-between;
		}
		.row3 .steps .item {
			position: relative;
			width: 128px;
			height: 140px;
			padding-top: 24px;
			font-size: 14px;
	    color: rgba(0,0,0,.8);
	    line-height: 14px;
	    font-weight: 400;
	    display: flex;
	    flex-direction: column;
      align-items: center;
		}
		.row3 .steps .item .icon {
			width: 60px;
	    height: 60px;
	    margin-bottom: 11px;
		}
		.row3 .steps .item span {
			border-bottom: 1px dotted rgba(0, 0, 0, 0.4)
		}
		.row3 .steps .item .to-right {
			position: absolute;
	    width: 24px;
    	height: 12px;
    	top: 50%;
    	left: -30px;
    	margin-top: -6px;
		}
		.row3 .btn-list {
			margin: 0 auto;
			width: 512px;
			display: flex;
		}
		.row3 .btn-list .btn {
			height: 86px;
			width: 50%;
			background-position: center bottom;
			background-repeat: no-repeat;
			background-size: 100% auto;
			cursor: pointer;
		}
		.row3 .btn-list .btn:nth-child(1) {
			background-image: url(./static/image/img14.png);
		}
		.row3 .btn-list .btn:nth-child(2) {
			background-image: url(./static/image/img15.png);
		}
		.row4 {
			display: flex;
	    -webkit-align-items: center;
	    -moz-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	    width: 996px;
	    height: 72px;
	    min-height: 72px;
	    margin-top: 16px;
	    padding-left: 32px;
	    -moz-border-radius: 12px;
	    border-radius: 12px;
	    background-color: #fff;
	    background-image: url(./static/image/img13.png);
	    background-repeat: no-repeat;
	    background-position: right 58px bottom 0;
	    -webkit-box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    box-sizing: border-box;
		}
		.row4 img {
			width: 56px;
			height: 56px;
		}
		.row4 .name {
			font-size: 14px;
	    color: rgba(0,0,0,.6);
	    line-height: 14px;
	    margin-left: 24px;
	    margin-right: 8px;
		}
		.row4 .num {
			font-size: 28px;
	    line-height: 28px;
	    font-weight: 600;
	    color: rgba(0, 0, 0, 0.8);
		}
		.row5 {
			margin: 0 20px;
			padding: 20px 20px 30px;
			background: #fff;
			border-radius: 10px;
		}
		.row5 .list {
			display: flex;
			padding: 20px;
			height: 80px;
		}
		.row5 .list:nth-child(1) {
			margin-bottom: 10px;
			border-radius: 10px 10px 0 0;
			background-image: linear-gradient(to bottom, #F5EFEA, #FDFCFA);
		}
		.row5 .item {
			width: 150px;
		}
		.row5 .item .name {
			margin-bottom: 2px;
			font-size: 14px;
			line-height: 1;
			color: #78736D;
			font-weight: 400;
		}
		.row5 .item .num {
			display: flex;
			align-items: flex-end;
			font-size: 26px;
			line-height: 1;
			color: #333;
		}
		.row5 .item .num .icon {
			margin-bottom: 2px;
			font-size: 18px;
			color: #999;
		}
		.row6 {
			margin-bottom: 40px;
			font-size: 30px;
			text-align: center;
		}
	</style>
</head>
<body>

	<div id="app" v-cloak>
		<m-layout>
			<div class="home-wp">
				<div class="main">
					<!-- <div class="row1">
						<div class="down-time">
							<div class="num">{{aTime[0]}}</div>
							<div class="txt">天</div>
							<div class="num">{{aTime[1]}}</div>
							<div class="txt">时</div>
							<div class="num">{{aTime[2]}}</div>
							<div class="txt">分</div>
							<div class="num">{{aTime[3]}}</div>
							<div class="txt">秒</div>
						</div>
						<div class="tip">发货不及时可能会影响您未来引流权重及开款备货权益</div>
					</div>
					<img class="row2" src="./static/image/img03.png">
					<div class="row3">
						<img class="top" src="./static/image/img04.png">
						<div class="text">恭喜您已完成新店入驻，为了更好的享受Temu跨境销售红利，请尽快完成商品发布</div>
						<div class="steps">
							<div v-for="(item, index) in stepList" :key="index" class="item">
								<img class="icon" :src="item.img">
								<el-tooltip effect="light" :content="item.tip" placement="top">
						      <span>{{item.name}}</span>
						    </el-tooltip>
								<img v-if="index != 0" class="to-right" src="./static/image/img11.png">
							</div>
						</div>
						<div class="btn-list">
							<div class="btn"></div>
							<div class="btn"></div>
						</div>
					</div> -->
					<div class="row6">欢迎来到<b>Temu卖家中心</b></div>
					<div class="row5">
						<div v-for="(aItem, aIndex) in numList" :key="aIndex" class="list">
							<div v-for="(bItem, bIndex) in aItem" :key="aIndex+'_'+bIndex" class="item">
								<div class="name">{{bItem.name}}</div>
								<div class="num">{{bItem.num}}<i v-if="bItem.to" class="icon el-icon-arrow-right"></i></div>
							</div>
						</div>
					</div>
					<div class="row4">
						<img src="./static/image/img12.png">
						<span class="name">消费者咨询</span>
						<span class="num">0</span>
					</div>
				</div>
			</div>
		</m-layout>
	</div>

	<script src="./static/libs/vue2.6.8/vue.min.js"></script>
	<script src="./static/libs/element-ui/index.min.js"></script>
	<script src="./static/js/Tools.js"></script>
	<script src="./config/home.js"></script>
	<script src="./static/components/common.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data() {
				return {
					// 倒计时
					downTime: 0,
					// 步骤列表
					stepList: [
						{name: '新建商品', tip: '请前往商品列表或新建商品模块创建商品', img: './static/image/img05.png'},
						{name: '寄样', tip: '收到系统提示后，按照提示进行实物寄样或线上上传视频、图片', img: './static/image/img06.png'},
						{name: '审版', tip: '针对寄送样品进行审版并根据审版建议进行调整', img: './static/image/img07.png'},
						{name: '申报价格', tip: '审版通过的样品进入价格申报环节', img: './static/image/img08.png'},
						{name: '创建首单', tip: '价格申报环节结束后，您可以申请备货，并按照打包要求打包货品；备货单审核通过后，货品需按照要求贴打包标签并发货', img: './static/image/img09.png'},
						{name: '发布至站点正式售卖', tip: '仓库收到货品且货品通过大货质检，同时卖家确认商品信息完毕的，即可正式上线售卖', img: './static/image/img10.png'},
					],
					// 数量列表
					numList: CONFIG.numList,
				}
			},
			computed: {
				// 倒计时列表
				aTime () {
					let res = ['00', '00', '00', '00'];
					if(this.downTime > 0) {
						// 天
						let a1 = Math.floor(this.downTime/(24*60*60*1000));
						let m1 = this.downTime%(24*60*60*1000);
						// 时
						let a2 = Math.floor(m1/(60*60*1000));
						let m2 = m1%(60*60*1000);
						// 分
						let a3 = Math.floor(m2/(60*1000));
						let m3 = m2%(60*1000);
						// 秒
						let a4 = Math.floor(m3/1000);
						// 结果
						res = [Tools.makeUpNum(a1), Tools.makeUpNum(a2), Tools.makeUpNum(a3), Tools.makeUpNum(a4)];
					}
					return res;
				}
			},
			mounted() {
				var tomorrow = new Date();
				tomorrow.setDate(tomorrow.getDate() + CONFIG.downDay); // 设置为记录今天几天
				tomorrow.setHours(0, 0, 0, 0); // 设置时间为0点
				this.downTime = tomorrow.getTime()-(new Date().getTime()); // 获取时间戳
				var timer = setInterval(() => {
					this.downTime-=1000;
					if(this.downTime <= 0) {
						clearInterval(timer);
					}
				}, 1000);
			}
		})
	</script>
</body>
</html>